<template>
  <header class="header">
    <h1>todos</h1>
    <input v-model="isAll" id="toggle-all" class="toggle-all" type="checkbox" >
    <label for="toggle-all"></label>
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      v-model="task"
      @keydown.enter="enterFn"
    />
  </header>
</template>

<script>
/**
 * 需求1：点击全选 - 小选受影响
 * 1、声明一个计算属性isAll，然后双向绑定在全选框中
 * 2、在set函数中，实现全选影响小选
 *    获取全选框的状态（set函数的参数即为全选框的状态值）
 *    循环showArr数组获取到绑定小选框的属性，然后赋值为全选框的状态值
 *     要获取到showArr，需要通过父传子把数据传递过来
 * 
 * */ 
export default {
  // arr是复杂数据类型，对于复杂数据类型来说，只要内存地址不变量，只改其中的某个属性，那么
  // props就认为这个对象是没有任何改变的。
  props: ["arr"],
  data(){
    return {
      task: ""
    }
  },
  methods: {
    enterFn(){
      // 获取到用户输入的内容，然后通过子传父技术，把任务名传给父组件
      // console.log(this.task);
      this.$emit("addTaskEvent", this.task)
    }
  },
  computed:{
    isAll: {
      set(bool){
        // 点击全选框，把全选框的状态值赋值给所有小选框
        this.arr.forEach(item=>{
          item.isDone = bool
        })
      },
      get(){
        return this.arr.every(item=>item.isDone===true)
      }
    }
  }
}
</script>